<template>
  <div class="template-form-Lu">
    <a-modal
      title=""
      :visible="applicationTableVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="form-modal-Lu"
      @cancel="closeVisible">
      <template slot="footer" style="text-align:center;">
        <a-button @click="closeVisible" class="blue-btn">关闭</a-button>
      </template>
      <a-tabs type="card">
        <a-tab-pane key="1" tab="套餐详情">
          <div class="checkTag-div">
            <a-form layout="inline" :form="form">
              <a-row>
                <a-col span="8">
                  <a-form-item prop="" label="套餐名称">
                    <span>{{ form.ftcmc }}</span>
                  </a-form-item>
                </a-col>
                <a-col span="8">
                  <a-form-item prop="" label="年份">
                    <span>{{ form.fyear }}</span>
                  </a-form-item>
                </a-col>
                <a-col span="8">
                  <a-form-item prop="" label="备注">
                    <span>{{ form.fbz }}</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
            <div class="checkTags">
              <div class="checkTags-left">
                <a-input
                  v-if="editVisible"
                  ref="input"
                  type="text"
                  size="small"
                  :style="{ width: '78px' }"
                  :value="editValue"
                  @change="editInputChange"
                  @keyup.enter="editInputConfirm"
                />
                <a-input
                  v-if="inputVisible"
                  ref="input"
                  type="text"
                  size="small"
                  :style="{ width: '78px' }"
                  :value="inputValue"
                  @change="handleInputChange"
                  @blur="handleInputConfirm"
                  @keyup.enter="handleInputConfirm"
                />
                <a-tag class="add-tag" v-else @click="showInput">
                  <a-icon type="plus" /> 新增项目
                </a-tag>
                <br/>
                <template v-for="(tag,index) in tags">
                  <span class="app">
                    <a-checkable-tag
                      class="checkable"
                      :key="tag.ftclxid"
                      :checked="selectedTags.indexOf(tag) > -1"
                      @change="checked => handleChange(tag, checked)"
                    >
                      {{ tag.fgzxmc }}
                    </a-checkable-tag>
                    <a-popconfirm
                      title="请选择操作"
                      ok-text="删除"
                      cancel-text="编辑"
                      @confirm="deleteTag(tag)"
                      @cancel="editTag(tag,index)">
                      <a-icon slot="icon" type="question-circle-o" style="color: red" />
                      <a-icon type="exclamation-circle" class="checkable-icon"/>
                    </a-popconfirm>
                  </span>
                </template>
              </div>
              <div class="checkTags-right">
                <div style="margin-top: 100px;">
                  <a-input
                  v-if="inputVisible2"
                  ref="input"
                  type2="text"
                  size="small"
                  :style="{ width: '78px' }"
                  :value="inputValue2"
                  @change="handleInputChange2"
                  @keyup.enter="handleInputConfirm2"
                />
                    <a-tag
                      v-for="(item,index) in selectedList" :key="item"
                      closable @close="preventDefault($event,item)"
                      @dblclick="handleModify(item.fgzxmc, index)"
                      class="checked-tag">
                      {{item.fgzxmc}}
                    </a-tag>
                  </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>
<script>
import {queryGztclxById,getAllGzxkList} from './service/index'
export default {
  name: '',
  props: {
    formData:{
      type:[Array,Object],
      default: () => {},
      required:false
    },
  },
  data() {
    return {
      applicationTableVisible: false,
      form: {},

      tags: [],
      selectedTags: [],
      selectedList: [],

      inputVisible: false,
      inputValue: '',

      editVisible: false,
      editValue: '',
      editIndex: 0,

      selectedList: [],
      modifyTag: null,
      curIndex: 0,
      type: "add",
      type2: "add",
      inputVisible2: false,
      inputValue2: '',
    }
  },
  watch: {
    formData(newVal,oldVal){
      this.form = {...newVal}
      //console.log(this.form)
      this.getData()
    }
  },
  mounted() {
  },
  methods: {
    closeVisible(){
      this.applicationTableVisible = false
    },
    getData(){
      let idd = this.form.id
      queryGztclxById({id:idd}).then(res => {
        if(res.code == 200){
          this.tags = res.result.gztcList
        }
      })
      // getAllGzxkList({fmc:this.form.ftcmc}).then(res => {
      //   //console.log(res)
      // })
    },
    // ---- //
    // 左-点击
    handleChange(tag, checked) {
      //console.log(tag,checked)
      const { selectedTags } = this;
      const nextSelectedTags = checked
        ? [...selectedTags, tag]
        : selectedTags.filter(t => t !== tag);
      //console.log('You are interested in: ', nextSelectedTags);
      this.selectedTags = nextSelectedTags;
      // this.selectedList = nextSelectedTags
      if(checked == true){
        this.selectedList.push(tag)
      } else {
        this.selectedList = this.selectedList.filter(item => item!==tag)
      }
      //console.log(this.selectedList)
    },
    // 左-添加
    showInput() {
      this.inputVisible = true;
      this.$nextTick(function() {
        this.$refs.input.focus();
      });
    },
    handleInputChange(e) {
      this.inputValue = e.target.value;
    },
    handleInputChange2(e) {
      this.inputValue2 = e.target.value;
    },
    handleInputConfirm() {
      const inputValue = this.inputValue;
      let tags = this.tags;
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
      }
      //console.log(tags);
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: '',
      });
    },
    handleInputConfirm2() {
     this.selectedList[this.curIndex] = this.inputValue2
     //console.log('111',this.selectedList)
      this.inputVisible2 = false
      this.inputValue2 = ''
    },
    // 左-编辑
    editTag(tag,index){
      //console.log('编辑tag',tag)
      this.editVisible = true
      this.editValue = tag
      this.editIndex = index
    },
    // 左-编辑-赋值
    editInputChange(e){
      this.editValue = e.target.value;
    },
    //
    editInputConfirm(){
      const inputValue = this.editValue;
      let tags = this.tags;
      tags[this.editIndex] = inputValue
      Object.assign(this, {
        tags,
        editVisible: false,
        editValue: '',
      });
      //console.log(tags);
    },
    // 左-删除
    deleteTag(tag){
      //console.log(tag)
      var that = this
      that.$confirm({
        title: '您确定要删除这个标签吗?',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.tags = that.tags.filter(item => item!==tag)
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
    // 右-删除
    preventDefault(e,tag) {
      e.preventDefault();
      this.selectedList = this.selectedList.filter(item => item!==tag)
      this.handleChange(tag, false)
    },
    // 右-双击编辑
    handleModify(tag, index) {
      this.modifyTag = tag;
      this.curIndex = index;
      this.inputValue2 = tag;
      this.inputVisible2 = true;
      this.type = "modify";
    },
  },
}
</script>
<style>

</style>
<style>
@import url('../../css/oaLess.css');
@import url('../../css/oaClass.css');
</style>
